<template>
  <div class="countdown-container">
    <!-- 显示倒计时，格式 mm:ss -->
    <span class="countdown-display !color-#fff font-bold">
      {{ formattedTime }}
    </span>
  </div>
</template>

<script setup lang="ts">

// 1. 定义 Props
const props = defineProps({
  // 总倒计时秒数，默认60秒
  totalSeconds: {
    type: Number,
    default: 60,
    validator: (value) => value > 0 // 确保是正数
  }
})

// 2. 定义 Emits (事件)
const emit = defineEmits(['finish'])

// 3. 定义响应式数据
const remainingSeconds = ref(props.totalSeconds) // 剩余秒数
const timer = ref(null) // 存储 setInterval 的 ID

// 4. 计算属性：格式化显示时间 (mm:ss)
const formattedTime = computed(() => {
  // const seconds = remainingSeconds.value % 60
  // 使用 padStart 确保分钟和秒都是两位数
  return `${String(remainingSeconds.value).padStart(2, '0')}`
})

// 5. 倒计时核心逻辑
const startCountdown = () => {
  // 清除可能存在的旧定时器
  if (timer.value) {
    clearInterval(timer.value)
  }

  // 设置新定时器
  timer.value = setInterval(() => {
    if (remainingSeconds.value > 0) {
      remainingSeconds.value--
    } else {
      // 倒计时结束
      clearInterval(timer.value)
      timer.value = null
      emit('finish') // 触发 finish 事件
    }
  }, 1000) // 每1000毫秒（1秒）执行一次
}

// 6. 重置倒计时
const reset = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
  remainingSeconds.value = props.totalSeconds // 重置为初始值
}

// 7. 组件挂载后自动开始倒计时
// 如果你希望组件一加载就自动开始倒计时，取消下面的注释
// onMounted(() => {
//   startCountdown()
// })

// 8. 组件卸载时清理定时器 (非常重要！)
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})

// 9. 暴露方法给父组件使用
// 使用 defineExpose 暴露方法，父组件可以通过 ref 调用
defineExpose({
  startCountdown,
  reset
})
</script>

<style scoped lang="scss">
.countdown-container {
  display: inline-block;
  /* 可以根据需要添加样式 */
  /* font-weight: bold; */
  /* color: #e6a23c; */
}

.countdown-display {
  font-family: 'Courier New', monospace;
  /* 等宽字体更美观 */
  font-size: 16px;
  color: #333;
}
</style>
